<template>
  <view class="container">
    <view class="form">
      <text class="title">注册</text>
      <!-- 姓名 -->
      <input
        class="input"
        placeholder="请输入姓名"
        v-model="name"
        type="text"
      />
      <!-- 密码 -->
      <input
        class="input"
        placeholder="请输入密码"
        v-model="password"
        type="password"
      />
      <!-- 确认密码 -->
      <input
        class="input"
        placeholder="请确认密码"
        v-model="confirmPassword"
        type="password"
      />
      <!-- 昵称 -->
      <input
        class="input"
        placeholder="请输入昵称"
        v-model="nickname"
        type="text"
      />
      <!-- 手机号 -->
      <input
        class="input"
        placeholder="请输入手机号"
        v-model="phone"
        type="tel"
      />
      <!-- 邮箱 -->
      <input
        class="input"
        placeholder="请输入邮箱"
        v-model="email"
        type="email"
      />
      <button class="btn" type="primary" @click="handleRegister">注册</button>
      <view class="link">
        <text>已有账号？</text>
        <navigator url="/pages/login/login">去登录</navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '', // 姓名
      password: '', // 密码
      confirmPassword: '', // 确认密码
      nickname: '', // 昵称
      phone: '', // 手机号
      email: '' // 邮箱
    };
  },
  methods: {
    handleRegister() {
      // 校验所有必填信息是否完整
      if (!this.name || !this.password || !this.confirmPassword || !this.nickname || !this.phone || !this.email) {
        uni.showToast({
          title: '请输入完整信息',
          icon: 'none',
        });
        return;
      }
      // 校验密码一致性
      if (this.password !== this.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none',
        });
        return;
      }

      // 读取本地已注册用户列表
      let userList = uni.getStorageSync('userList') || [];
      // 检查姓名/手机号/邮箱是否已存在（可根据实际需求调整校验逻辑）
      const isExist = userList.some(user => 
        user.name === this.name || user.phone === this.phone || user.email === this.email
      );
      if (isExist) {
        uni.showToast({
          title: '姓名/手机号/邮箱已被注册',
          icon: 'none',
        });
        return;
      }

      // 调用云函数注册
      uniCloud.callFunction({
        name:'addUser',
        data:{
          'name': this.name,
          'password': this.password,
          'nickname': this.nickname,
          'phone': this.phone,
          'email': this.email
        },
        success: (msg) => {
          console.log("addUser callback"+JSON.stringify(msg));
        },
        fail: (errer) => {
          console.error("addUser fail"+ errer)
        }
      })

      // 添加新用户到本地列表
      userList.push({
        name: this.name,
        nickname: this.nickname,
        phone: this.phone,
        email: this.email,
        password: this.password,
        avatar: '' // 初始头像为空
      });
      // 存储更新后的用户列表
      uni.setStorageSync('userList', userList);

      // 注册成功提示并跳转登录页
      uni.showToast({
        title: '注册成功',
        icon: 'success'
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/login',
        });
      }, 1000);
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.form {
  width: 80%;
  max-width: 300px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  display: block;
}

.input {
  width: 100%;
  height: 40px;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0 10px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.btn {
  width: 100%;
  height: 40px;
  background-color: #007aff;
  color: #fff;
  border-radius: 4px;
  margin-bottom: 10px;
}

.link {
  font-size: 14px;
  color: #666;
}

.link navigator {
  color: #007aff;
  text-decoration: none;
}
</style>